import { ref, defineComponent, toRaw, h } from 'vue'
let menuList = [
  {
    type: 'path',
    name: '首页',
    path: '/',
    id: 'homeakfaketwrwr32',
  },
  {
    type: 'menu',
    id: 'ajfakfkaf',
    name: '系统设置',
    children: [
      {
        type: 'path',
        path: '/role',
        name: '角色管理',
        id: 'alfkjakfakwer',
      },
      {
        type: 'path',
        path: '/menu',
        name: '菜单配置',
        id: 'alfk343fakwer',
      },
      {
        type: 'menu',
        name: '二级菜单',
        id: 'a3easd43fakwer',
        children: [
          {
            type: 'path',
            path: '/test',
            name: '子菜单',
            id: 'a3e23fsfd43fakwer',
            children: [
              {
                type: 'button',
                name: '添加权限',
                key: 'auth-key',
                id: 'btna3e23fsfd43fakwer',
              },
              {
                type: 'button',
                name: '删除权限',
                key: 'auth-keyrrr',
                id: 'btna45akwer',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    type: 'path',
    path: '/settings',
    name: '其他菜单',
    id: 'yyte2alkfakfjakfj',
  },
]
import { ElTree, ElButton, ElInput, ElSelect, ElOption } from 'element-plus'
import './index.scss'
import { AnyObject } from 'element-plus/lib/el-table/src/table.type'
const handleMenuList = (arr: any[]) => {
  arr.forEach(item => {
    switch (item.type) {
      case 'menu':
        Object.keys(item).forEach(key => {
          if (!['type', 'name', 'id', 'children'].includes(key)) {
            delete item[key]
          } else if (key === 'children' && !item.children.length) {
            delete item.children
          }
        })
        break
      case 'path':
        Object.keys(item).forEach(key => {
          if (!['type', 'name', 'id', 'path', 'key', 'children'].includes(key)) {
            delete item[key]
          } else if (key === 'children' && !item.children.length) {
            delete item.children
          }
        })
        item.key && (item.path = item.key)
        delete item.key
        break
      case 'button':
        Object.keys(item).forEach(key => {
          if (!['type', 'name', 'id', 'key', 'children'].includes(key)) {
            delete item[key]
          } else if (key === 'children' && !item.children.length) {
            delete item.children
          }
        })
        break
      default:
        break
    }
    if (item.children && item.children.length) {
      handleMenuList(item.children)
    }
  })
}
export default defineComponent({
  name: 'Index',
  setup() {
    const dataRef = ref(menuList)
    const add = (node: any, data: any) => {
      if (node.level === 1 && data.type === 'menu') {
        console.log('课创建二级菜单或者页面')
      }
      const type = data.type === 'path' ? 'button' : 'path'
      const placeholder = data.type === 'path' ? '请输入按钮名字' : '请输入页面名字'
      const keyPlaceholder = data.type === 'path' ? '请输入按钮key' : '请输入页面路径'
      const name = '' //data.type === 'path' ? '按钮名字' : '页面名字'
      const newChild = {
        id: Math.random().toString(36),
        type,
        name,
        children: [],
        key: '',
        keyPlaceholder,
        isEdit: true,
        placeholder,
      }
      if (!data.children) {
        data.children = []
      }
      // @ts-ignore
      node.level === 1 && data.type === 'menu' && (newChild.isTopMenu = true)
      data.children.push(newChild)
    }
    const edit = (data: any) => {
      data.isEdit = true
      let placeholder = '' // data.type === 'path' ? '请输入按钮名字' : '请输入页面名字'
      let keyPlaceholder = '' // data.type === 'path' ? '请输入按钮key' : '请输入页面路径'
      let key = ''
      switch (data.type) {
        case 'menu':
          placeholder = '请输入菜单名字'
          break
        case 'path':
          placeholder = '请输入页面名字'
          keyPlaceholder = '请输入页面路径'
          key = data.path
          break
        case 'button':
          placeholder = '请输入按钮名字'
          keyPlaceholder = '请输入按钮key'
          key = data.key
          break
        default:
          break
      }
      data.keyPlaceholder = keyPlaceholder
      data.placeholder = placeholder
      data.key = key
    }
    const remove = (node: any, data: any) => {
      if (node.level === 1) {
        dataRef.value = dataRef.value.filter(item => item.id !== data.id)
        return
      }
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d: any) => d.id === data.id)
      children.splice(index, 1)
    }
    const save = () => {
      handleMenuList(toRaw(dataRef.value))
      const menuList = JSON.parse(JSON.stringify(toRaw(dataRef.value)))
      console.log(menuList)
    }
    const renderContent = (h: Function, { node, data, store }: any) => {
      const name = data.isEdit ? (
        <span>
          {data.isTopMenu ? (
            <ElSelect
              style='margin-left:8px;'
              size='mini'
              modelValue={data.type}
              onChange={(value: any) => {
                if (value === 'menu') {
                  data.keyPlaceholder = ''
                  data.placeholder = '请输入菜单名字'
                } else {
                  data.keyPlaceholder = '请输入页面路径'
                }
                data.type = value
              }}
            >
              {[
                { value: 'menu', label: '菜单' },
                { value: 'path', label: '页面' },
              ].map(item => {
                return <ElOption value={item.value} key={item.value} label={item.label} />
              })}
            </ElSelect>
          ) : (
            ''
          )}
          <ElInput
            style='margin-left:8px'
            size='mini'
            placeholder={data.placeholder}
            modelValue={data.name}
            onInput={(value: string) => (data.name = value)}
          />
          {data.keyPlaceholder ? (
            <ElInput
              style='margin-left:8px'
              size='mini'
              placeholder={data.keyPlaceholder}
              modelValue={data.key}
              onInput={(value: string) => (data.key = value)}
            />
          ) : (
            ''
          )}
        </span>
      ) : (
        <span style='margin-left:8px'>{data.name}</span>
      )
      const _node = (
        <span class='custom-tree-node'>
          <span>
            {data.type === 'menu' && <i class='el-icon-menu'></i>}
            {data.type === 'path' && <i class='el-icon-document'></i>}
            {data.type === 'button' && <i class='el-icon-setting'></i>}
            {name}
          </span>
          <span>
            <span class='operation'>
              {data.name !== '首页' ? (
                <a onClick={() => remove(node, data)}>
                  <i class='el-icon-delete danger-color'></i>
                </a>
              ) : (
                ''
              )}
            </span>
            <span class='operation'>
              <a onClick={() => add(node, data)}>
                {data.type !== 'button' ? <i class='el-icon-circle-plus-outline primary-color'></i> : ''}
              </a>
            </span>
            <span class='operation'>
              <a onClick={() => edit(data)}>
                <i class='el-icon-edit'></i>
              </a>
            </span>
          </span>
        </span>
      )
      return _node
    }
    return () => (
      <div>
        <div class='items-right'>
          <ElButton type='info' size='mini'>
            添加
          </ElButton>
          <ElButton type='primary' size='mini' onClick={save}>
            保存
          </ElButton>
        </div>
        <ElTree
          data={dataRef.value}
          showCheckbox={true}
          nodeKey='id'
          defaultExpandAll={true}
          expandOnClickNode={false}
          renderContent={renderContent}
        />
      </div>
    )
  },
})
